<div dojoType="dijit.Dialog"
     id="sendManageCategoriesDialog"
     title="Safety & Security Consultant Registry of Texas"
     style="display:none;">
    <table border="0" cellpadding="0" cellspacing="0" width="500" height="500">
        <tbody>
            <tr>
                <td style="width:30px;background-image:url('images/dialogBg.png');background-repeat:repeat-y;"></td>
                <td align="center"
                    valign="top"
                    id="sendManageCategoriesDialog"
                    style="padding-top:10px;padding-right:10px;">
                    <div id="adminManageCategoriesDialogArea">
                        <form dojoType="dijit.form.Form"
                              id="manageCategoriesForm"
                              name="manageCategoriesForm"
                              method="post"
                              action="javascript:submitManageCategoriesForm();">
                            <table border="0" style="border:0px solid #000000;width:100%;font-family:Verdana;font-size:12px;">
                                <thead>
                                    <tr>
                                        <th colspan="2" style="text-align:left;font-family:Arial;font-size:16px;padding-bottom:10px;">
                                            Manage Categories
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td colspan="2" style="text-align:left;font-family:Verdana;font-size:12px;padding-top:10px;border-top:1px solid #CCCCCC;">
                                            TBD
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="text-align:left;font-family:Verdana;font-size:12px;padding-top:40px;">
                                            <div id="manageCategoriesFormStatusMessage"></div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="2"
                                            style="width:100px;text-align:left;font-family:Verdana;font-size:12px;font-weight:bold;padding-top:5px;">
                                            Category:
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="2" style="text-align:left;padding-top:0px;">
                                            <input style="width:320px;"
                                                   type="text"
                                                   name="categoryName"
                                                   id="categoryName"
                                                   value=""
                                                   dojoType="dijit.form.ValidationTextBox"
                                                   trim="true"
                                                   regExp="[\a-zA-Z0-9\-\.\_\#\ \/]+"
                                                   required="true" />
                                            <button dojoType=dijit.form.Button
                                                    type="button"
                                                    name="submitAddNewCategoryForm"
                                                    id="submitAddNewCategoryForm"
                                                    iconClass="emptyIcon"
                                                    onclick="addNewCategory();"
                                                    style="margin-left:5px;">
                                                Add Category
                                            </button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="2">
                                            <div style="margin-top:0px;padding:0px;border:1px solid #CCCCCC;">
                                                <div  style="font-weight:bold;padding:5px 0px 5px 0px;background-color:#AAAAAA;color:#FFFFFF;text-align:center;">
                                                    Categories
                                                </div>
                                                <div id="categoryListArea"
                                                     style="padding:0px;height:300px;overflow:scroll;text-align:center;">
                                                     <img style="margin-top:50px;" 
                                                          src="images/loaders/bigLoader.gif">
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </form>
                    </div>
                    <div id="adminUpdateCategoriesArea"
                         style="display:none;">
                        <table style="border:0px solid #000000;width:100%;font-family:Verdana;font-size:12px;">
                            <thead>
                                <tr>
                                    <th style="text-align:left;font-family:Arial;font-size:16px;padding-bottom:10px;">Manage Categories</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td style="text-align:left;font-family:Verdana;font-size:12px;padding-top:10px;border-top:1px solid #CCCCCC;">
                                        TBD
                                    </td>
                                </tr>
                                <tr>
                                    <td style="text-align:left;font-family:Verdana;font-size:12px;padding-top:40px;">
                                        <div id="adminEditCategoryStatusMessage"></div>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="width:100px;text-align:left;font-family:Verdana;font-size:12px;font-weight:bold;padding-top:5px;">
                                        Edit Category:
                                    </td>
                                </tr>
                                <tr>
                                    <td style="text-align:left;">
                                        <form dojoType="dijit.form.Form"
                                              id="editCategoryForm"
                                              name="editCategoryForm"
                                              method="post"
                                              action="javascript:submitEditCategoryForm();">
                                            <input type="hidden"
                                                   id="editCategoryId"
                                                   name="editCategoryId"
                                                   value="" />
                                            <input style="width:300px;"
                                                   type="text"
                                                   name="editCategoryName"
                                                   id="editCategoryName"
                                                   value=""
                                                   dojoType="dijit.form.ValidationTextBox"
                                                   trim="true"
                                                   regExp="[\a-zA-Z0-9\-\.\_\#\ \/]+"
                                                   required="true" />
                                            <button dojoType=dijit.form.Button
                                                    type="button"
                                                    name="submitEditCategoryForm"
                                                    id="submitEditCategoryForm"
                                                    iconClass="emptyIcon"
                                                    onclick="submitEditCategoryForm();"
                                                    style="margin-left:5px;">
                                                Modify Category
                                            </button>
                                        </form>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="text-align:center;padding-top:30px;">
                                        <button dojoType=dijit.form.Button
                                                type="button"
                                                name="closeManageCategoriesForm"
                                                id="closeManageCategoriesForm"
                                                iconClass="emptyIcon"
                                                onclick="hideModifyCategoryForm();">
                                            Return to Manage Categories
                                        </button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>